<template>
	<view class="gt-admin-content col" >
			<view style="padding: 10px;">
				<table class="gt-table" align="center">
					<thead >
						<tr>
							<td v-if="table.batchSelect" width="50">
								<checkbox :checked="selectAllCheckbox" @click="selectParentCheckBox"></checkbox>
							</td>
							<td>序号</td>
							<td v-for="(column,key) in table.columns" :key="key">{{ column.label }}</td>
						</tr>
					</thead>
					<tbody v-if="!list || list.length == 0">
						<tr class="gt-table-tr">
							<td :colspan="table.columns && table.columns.length + 1">
								<view class="t-center c-secondary pd-15">无数据</view>
							</td>
						</tr>
					</tbody>
					
					<tbody v-else v-for="(row,rowIndex) in list" :key="rowIndex">
						<tr class="gt-table-tr">
							<td v-if="table.batchSelect">
								<checkbox
									:checked="batchSelectIndexList && batchSelectIndexList.indexOf(rowIndex)==-1 ? false : true "
									@click="selectCheckBox(rowIndex)"></checkbox>
							</td>
							<td>#{{ rowIndex + 1 }}</td>
							<td v-for="(column,columnIndex) in table.columns" :key="columnIndex">
								<slot :name="column.field" :data="{row,column,rowIndex,columnIndex}">
									<!-- 插槽 -->
									<view v-if="column.type == 'custom'" @click="clickCell(column,row,rowIndex)">
										<slot name="custom" :row="row" :column="column" :rowIndex="rowIndex"></slot>
									</view>
									<!-- 文字 -->
									<view v-else-if="column.type == 'custom-html'"  @click="clickCell(column,row,rowIndex)" v-html="column.value && column.value(row,rowIndex,$fun.getThis())"></view>
									<!-- 时间 -->
									<view v-else-if="column.type == 'date'"  @click="clickCell(column,row,rowIndex)">
										{{ $tools.timeToDate(row[column.field],'Y-M-D ')  }}
									</view>
									<view v-else-if="column.type == 'datetime'"  @click="clickCell(column,row,rowIndex)">
										{{ $tools.timeToDate(row[column.field],'Y-M-D h:m:s')  }}
									</view>
									<!-- 图片 -->
									<view v-else-if="column.type == 'img' && row[column.field] != ''"
										class="row pointer"  @click="clickCell(column,row,rowIndex)">
										<image :class="column.size?column.size:'w-h-30'" class=" b-r"
											:src="row[column.field]"  @click="$fun.showImgs(row[column.field].split(','))"></image>
									</view>
									<!-- 枚举 -->
									<view v-else-if="column.type == 'select'" class="row align-center" @click="clickCell(column,row,rowIndex)">
										<uni-icons
											v-if="column.color && row[column.field] != undefined && column.color[row[column.field]]"
											:type="column.color[row[column.field]].icon || 'smallcircle-filled'"
											:color="column.color[row[column.field]].color || '#aaa' " size="16"
											class="mr-5"></uni-icons>
										<view
											:style="column.color && row[column.field] != undefined && column.color[row[column.field]]  ? column.color[row[column.field]] : '' ">
											
												<text selectable>{{ $tools.getListVal(selectList[column.field],row[column.field])}}</text>
										</view>
									</view>
									<!-- 复制文字 -->
									<view v-else-if="column.type == 'copy_text'" @click="clickCell(column,row,rowIndex)">
										<text class="pointer" @click="$fun.copy(row[column.field])">
											<text class="iconfont icon-copy mr-5" style="font-size: 10px;"></text>
											<text class="" >{{row[column.field]}}</text>
										</text>
									</view>
									<!-- 按钮 -->
									<view v-else-if="column.type == 'btn'" @click="clickCell(column,row,rowIndex)">
										<view class="row" v-for="(btnItems,btnKey) in column.btnList" :key="btnKey"
											v-if=" table.status == btnItems.status">
											<view v-for="(btn,btnIndex) in btnItems.list" :key="btnIndex">
												<gt-btn v-if="btn.url" :name="btn.name" :iconClass="btn.iconClass"
													:class="btn.class" :postUrl="btn.url(row)" :confirmText="'您确认此操作？'"
													@callBack="rowCallBack">
												</gt-btn>
												<view v-else @click="update(btn.label,row)">
													<gt-btn :name="btn.name" :iconClass="btn.iconClass"
														:class="btn.class">
													</gt-btn>
												</view>
											</view>
										</view>
									</view>
									<!-- 自定义Value -->
									<view v-else-if="column.value" @click="clickCell(column,row,rowIndex)">
										{{column.value(row,rowIndex,row[column.field])}}
									</view>

									<!-- 操作 -->
									<view v-else-if="column.type == 'handle'" class="row">
										<view v-for="(item,itemIndex) in column.items" :key="itemIndex"
											v-if="handleIsShow(item,row)" :style="column.style || ''">
											<view v-if="item.type == 'popup'"
												:class="item.class || 'btn btn-link btn-xs mr-10'" :style="item.style"
												@click="clickBack(item,row)">
												{{item.label}}
											</view>
											<view v-else-if="item.type == 'urlPost'"
												:class="item.class || 'btn btn-link btn-xs mr-10'" :style="item.style"
												@click="clickBack(item,row)">
												{{item.label}}
											</view>
											<view v-else class="btn btn-xs mr-10"  @click="clickCell(item,row,rowIndex)">{{item.label}}</view>
										</view>
									</view>
									<!-- 文字 -->
									<view v-else-if="column.type == 'html'" v-html="row[column.field]" @click="clickCell(item,row,rowIndex)"></view>
									<!-- 文字 -->
									<view v-else  @click="clickCell(column,row,rowIndex)" :class="column.click ? 'gt-table-td-click' : ''">
										<text :selectable="column.click ? false : true">{{ row[column.field] }}</text>
									</view>
								</slot>
							</td>
						</tr>
						<slot name="tableChild" :row="row" :rowIndex="rowIndex"></slot>
					</tbody>
				</table>
			</view>
	</view>
</template>

<script>
	export default {
		name: "gt-table",
		props: {
			table: {
				type: [Array, Object],
				default: function() {
					return {
						columns: [],
					};
				}
			},
			list: {
				type: [Array],
				default: function() {
					return [];
				}
			},
			selectList: {
				type: [Array, Object],
				default: function() {
					return {};
				}
			}
		},
		created() {},
		data() {
			return {
				batchSelectIndexList: [],
				pageLimitList: [{
						key: 20,
						val: '20条'
					},
					{
						key: 30,
						val: '30条'
					},
					{
						key: 50,
						val: '50条'
					},
					{
						key: 100,
						val: '100条'
					},
				],
				searchPage: ''
			}
		},
		computed: {
			selectAllCheckbox() {
				if (this.table.list && this.table.list.length != 0 && this.batchSelectIndexList && this
					.batchSelectIndexList
					.length == this.table.list.length) {
					return true;
				}
				return false;
			}
		},
		methods: {
			clickCell(column,row,rowIndex){
				if(column.click){
					column.click(row,rowIndex,this.$fun.getThis())
				}
			},
			clickBack(item,row){
				this.$emit('clickBack',item,row);
			},
			handleIsShow(item, row) {
				if (item.isShow && typeof item.isShow == 'function') {
					return item.isShow(row);
				}
				return true;
			},
			selectCheckBox(index) {
				let key = this.batchSelectIndexList.indexOf(index);
				if (key == -1) {
					this.batchSelectIndexList.push(index);
				} else {
					this.batchSelectIndexList.splice(key, 1);
				}
				this.$emit('selectRowBack', this.batchSelectIndexList)
			},
			selectParentCheckBox() {
				if (this.table.list.length != 0 && this.batchSelectIndexList.length == this.table.list.length) {
					//取消
					this.batchSelectIndexList = [];
				} else {
					//选中
					let list = [];
					for (let i in this.table.list) {
						list.push(parseInt(i));
					}
					this.batchSelectIndexList = [];
					this.batchSelectIndexList = list;
				}
				this.$emit('selectRowBack', this.batchSelectIndexList)
			},
			changePageInfo(info) {
				this.batchSelectIndexList = [];
				this.$emit('changePageInfo', {
					page: info.page || this.table.pageInfo.page || 1,
					limit: info.limit || this.table.pageInfo.limit || 10,
				});
			},
			changePageLimit(e) {
				this.changePageInfo({
					page: 1,
					limit: e || 10
				})
			},
			// 分页获取列表
			pagination(e) {
				this.changePageInfo({
					page: e.current
				})
			},
			// 分页跳转
			skipPage() {
				let skipPage = parseInt(this.searchPage);
				this.changePageInfo({
					page: skipPage
				})
				this.searchPage = '';
			},
			batchCallBack(e) {
				if (e.msg) {
					this.batchSelectIndexList = []
					this.$emit('batchCallBack')
				}
			},
			rowCallBack(e) {
				if (e.msg) {
					this.batchSelectIndexList = []
					this.$emit('rowCallBack')
				}
			},
			update(label, row) {
				let obj = {
					label: label,
					row: row
				}
				this.$emit('update', obj)
			},
			getSelectColor(list, key, keyName = 'key', valueName = 'color') {
				for (let i in list) {
					let row = list[i];
					if (row[keyName] == key) {
						return row[valueName];
					}
				}
				return '';
			}
		}
	}
</script>

<style>
	.gt-table {
		width: 100%;
		max-width: 100%;
		background-color: #fff;
		font-size: 12px;
		color: #606266;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		border-collapse: collapse;
		border-spacing: 16px;
		color: #606266;
		text-align: left;
	}

	/* 线状网格 */
	.gt-table-line td {
		// border-top: none !important;
		// border-right: none !important;
		// border-left: none !important;
	}

	.gt-table thead {
		font-weight: 900;
		color: #858585;
	}

	.gt-table-tr:hover {
		background-color: #f9f9f9;
	}

	.gt-table tr {
		display: table-row;
		vertical-align: inherit;
		border-color: inherit;
	}

	.gt-table td {
		padding: 12px 15px;
	}

	.gt-table tbody td {
		border-top: 1px solid #eeeeee;
	}

	.gt-table-td-click {
		color: #409EFF;
		cursor: pointer;
	}

	.showTrChild,
	.showTrChild td,
	.showTrChild .td-content {
		min-height: 50px;
		animation: showTr .3s;
	}

	@keyframes showTr {
		form: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}

		to: {
			min-height: 50px;
			background-color: aqua;
		}
	}

	.hideTrChild,
	.hideTrChild td,
	.hideTrChild .td-content {
		height: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		border-top: none !important;
		animation: hideTr .3s;
	}

	@keyframes hideTr {
		form: {
			min-height: 100px;
		}

		to: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}
	}

	button {
		border: none;
	}

	.page--active {
		background-color: black;
	}

	.page-limit {
		width: 80px;
		height: 28px;
	}
</style>